<template>
  <div class="learn">
    <h3>学习分析</h3>
    <div class="right">
      <div class="block">
        <span class="demonstration">统计日期</span>
        <el-date-picker
          v-model="value2"
          type="daterange"
          start-placeholder="Start Date"
          end-placeholder="End Date"
          :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
        />
      </div>
      <span>今日</span>
      <span>昨日</span>
      <span>最近7天</span>
      <span>最近30天</span>
    </div>
  </div>
  <div class="echart">
     <div id="EachTerminal" style="width: 1000px; height: 400px;margin:auto"></div>
    <div id="main" style="width: 1000px; height: 400px;margin:auto">各类</div>
   
  </div>
</template>
<script setup lang="ts">
//1.导入echarts
import * as echarts from "echarts";

onMounted(() => {
  var myChart = echarts.init(document.getElementById("EachTerminal"));

  //3.请求数据

  //4.绘图
  myChart.setOption({
    title: {
      //标题的设置
       text: "各类型课程学习时长趋势",
    },
    legend: {
      //图例的设置
      top: 30,
    },
    xAxis: {
      type: "category",
      data: ["04-01", "04-02", "04-03", "04-04", "04-05", "04-06", "04-07"],
    },
    yAxis: { type: "value" },
    series: [
      //数据系列
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
      },
      {
        data: [520, 532, 601, 734, 1090, 1130, 1100],
        type: "line",
        smooth: true,
      },
      {
        data: [120, 832, 501, 634, 890, 930, 1020],
        type: "line",
        smooth: true,
      },
    ],
  });
});

onMounted(() => {
  //2.实例化echarts
  var myChart = echarts.init(document.getElementById("main"));

  //3.请求数据

  //4.绘图
  myChart.setOption({
    title: {
      //标题的设置
      text: "实时学习人数统计",
    },
    legend: {
      //图例的设置
      top: 30,
    },
    xAxis: {
      data: ["00", "01", "02", "03", "04", "05", "06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24"],
    },
    yAxis: { type: "value" },
    series: [
      //数据系列
      {
        data: [520, 300, 350, 480, 270, 510, 530,620, 532, 401, 334, 290, 630, 520,720, 232, 101, 334, 290, 230, 120,320, 472, 321, 214, 130, 220, 320],
        type: "bar",
      },
    ],
  });
});
</script>
<style scoped>
.learn{
     display: flex;
     justify-content: space-between;
     padding: 20px;
}
.right{
     display: flex;
     justify-content: space-evenly;
     align-items: center;
}
.right span{
     margin-left: 14px;
}
.demonstration{
     margin-right: 7px;
}
</style>